@import "compass/css3";
body{
    &.opacity{
        @include opacity(0);
        @include transition(opacity linear 0.5s);
    }
    
}

@function rem($val){
    @return $val/20+rem;
}
@mixin backgroundImage($val){
    background-image: url("/static/image/"+$val);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
@mixin nowrap(){
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
$row:1;
@mixin ellipsis ($row) {
    @if $row == 1 {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    } @else {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $row;
        line-clamp: $row;
    }
}

@mixin font-family($font){
    @if $font == "medium" {
        font-family: PingFangSC-Medium;
        font-weight: bold;
    } 
    @if $font == "semibold" {
        font-family: PingFangSC-Semibold;
        font-weight: bold;
    }
    @if $font == "regular" {
        font-family: PingFangSC-Regular ;
    }
}

@mixin safe($attr){
    #{$attr}:constant(safe-area-inset-bottom);
    #{$attr}:env(safe-area-inset-bottom);
}


